<!DOCTYPE html>
<html lang="ru">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-touch-icon.png" />
	<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png" />
	<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png" />
	<link rel="manifest" href="favicon/site.webmanifest" />
	<meta name="msapplication-TileColor" content="#00aba9" />
	<meta name="theme-color" content="#ffffff" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-notify@0.5.5/dist/simple-notify.min.css" />
	<link rel="stylesheet" href="./style/style.css" />

	<script defer src="./dist/main.js"></script>
	<title>O-Zone TestProject</title>
</head>

<body>
	<header>
		<nav>
			<div class="container">
				<div class"row">
					<div class="col">
						<div class="navbar-wrapper d-flex justify-content-between align-items-center">
							<a class="logo" href="/"></a>
							<div class="d-flex control-wrapper">
								<div class="catalog-button">
									<button>
										<span class="catalog-button-burger"></span>
										<span class="catalog-button-text"></span>
									</button>
									<div class="catalog">
										<ul class="catalog-list">
											<li>Игровые приставки</li>
											<li>Периферия для ПК</li>
											<li>Игры и софт</li>
										</ul>
									</div>
								</div>
								<div class="search">
									<div class="search-wrapper">
										<input class="search-wrapper-input" type="text" />
									</div>
									<div class="search-btn">
										<button></button>
									</div>
								</div>
							</div>
							<a href="#" id="cart">
								<span class="counter">0</span>
								<span class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
										<path fill="currentColor" fill-rule="nonzero"
											d="M6 6a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2h5.133L21.82 18.496A4 4 0 0 1 17.85 22H6.149a4 4 0 0 1-3.969-3.504L.867 8H6V6zm6 2a1 1 0 0 1 0 2H3.133l1.03 8.248A2 2 0 0 0 6.149 20h11.704a2 2 0 0 0 1.984-1.752L20.867 10H16V6a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2h4z">
										</path>
									</svg></span>
								<span class="desc">Корзина</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</nav>
	</header>

	<main>
		<div class="container">
			<div class="row">
				<div class="col-3 col-xl-2 d-none d-lg-block">
					<div class="filter">
						<div class="filter-title">
							<h5>Фильтр</h5>
						</div>
						<div class="filter-price">
							<div class="filter-price-title">
								Цена
							</div>
							<form>
								<div class="filter-price-range">
									<div class="filter-price-input-wrapper">
										<label for="min" class="filter-price-label">от</label>
										<input id="min" class="filter-price-input">
									</div>
									<div class="filter-price-input-wrapper">
										<label for="max" class="filter-price-label">до</label>
										<input id="max" class="filter-price-input">
									</div>
								</div>
							</form>
						</div>
						<div class="filter-check">
							<label class="filter-check-label">
								<input type="checkbox" class="filter-check-checkbox" id="discount-checkbox">
								<span class="filter-check-checkmark"></span>
								<span class="filter-check-label-text">Акция</span>
							</label>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-9 col-xl-10">
					<div class="container">
						<div class="row no-gutters goods">
							<!-- <div class="col-12 col-md-6 col-lg-4 col-xl-3">
								<div class="card">
									<div class="card-img-wrapper">
										<span class="card-img-top"
											style="background-image: url('https://cdn1.ozone.ru/multimedia/c400/1033180284.jpg')"></span>
									</div>
									<div class="card-body justify-content-between">
										<div class="card-price">33990 руб.</div>
										<h5 class="card-title">Игровая приставка Sony PlayStation 4 Pro</h5>
										<button class="btn btn-primary">В корзину</button>
									</div>
								</div>
							</div>
							<div class="col-12 col-md-6 col-lg-4 col-xl-3">
								<div class="card">
									<div class="card-sale">🔥Hot Sale🔥</div>
									<div class="card-img-wrapper">
										<span class="card-img-top"
											style="background-image: url('https://cdn1.ozone.ru/multimedia/c400/1027495663.jpg')"></span>
									</div>
									<div class="card-body justify-content-between">
										<div class="card-price">16499 руб.</div>
										<h5 class="card-title">Игровая приставка Sony PlayStation 3 Super Slim</h5>
										<button class="btn btn-primary">В корзину</button>
									</div>
								</div>
							</div>
							<div class="col-12 col-md-6 col-lg-4 col-xl-3">
								<div class="card">
									<div class="card-img-wrapper">
										<span class="card-img-top"
											style="background-image: url('https://cdn1.ozone.ru/multimedia/c400/1024358491.jpg')"></span>
									</div>
									<div class="card-body justify-content-between">
										<div class="card-price">39990 руб.</div>
										<h5 class="card-title">Игровая приставка Xbox One X</h5>
										<button class="btn btn-primary">В корзину</button>
									</div>
								</div>
							</div>
							<div class="col-12 col-md-6 col-lg-4 col-xl-3">
								<div class="card">
									<div class="card-sale">🔥Hot Sale🔥</div>
									<div class="card-img-wrapper">
										<span class="card-img-top"
											style="background-image: url('https://cdn1.ozone.ru/multimedia/c400/1024822131.jpg')"></span>
									</div>
									<div class="card-body justify-content-between">
										<div class="card-price">23411 руб.</div>
										<h5 class="card-title">Игровая приставка Xbox One S</h5>
										<button class="btn btn-primary">В корзину</button>
									</div>
								</div>
							</div>
							<div class="col-12 col-md-6 col-lg-4 col-xl-3">
								<div class="card">
									<div class="card-img-wrapper">
										<span class="card-img-top"
											style="background-image: url('https://cdn1.ozone.ru/multimedia/c400/1021386685.jpg')"></span>
									</div>
									<div class="card-body justify-content-between">
										<div class="card-price">24751 руб.</div>
										<h5 class="card-title">Игровая приставка Nintendo Switch</h5>
										<button class="btn btn-primary">В корзину</button>
									</div>
								</div>
							</div>
							<div class="col-12 col-md-6 col-lg-4 col-xl-3">
								<div class="card">
									<div class="card-sale">🔥Hot Sale🔥</div>
									<div class="card-img-wrapper">
										<span class="card-img-top"
											style="background-image: url('https://cdn1.ozone.ru/multimedia/c400/1024928305.jpg')"></span>
									</div>
									<div class="card-body justify-content-between">
										<div class="card-price">3624 руб.</div>
										<h5 class="card-title">Игровая приставка Sega Retro Genesis HD</h5>
										<button class="btn btn-primary">В корзину</button>
									</div>
								</div>
							</div>
							<div class="col-12 col-md-6 col-lg-4 col-xl-3">
								<div class="card">
									<div class="card-sale">🔥Hot Sale🔥</div>
									<div class="card-img-wrapper">
										<span class="card-img-top"
											style="background-image: url('https://cdn1.ozone.ru/multimedia/c400/1021877092.jpg')"></span>
									</div>
									<div class="card-body justify-content-between">
										<div class="card-price">1551 руб.</div>
										<h5 class="card-title">Игровая приставка Dendy Junior</h5>
										<button class="btn btn-primary">В корзину</button>
									</div>
								</div>
							</div>
							<div class="col-12 col-md-6 col-lg-4 col-xl-3">
								<div class="card">
									<div class="card-img-wrapper">
										<span class="card-img-top"
											style="background-image: url('https://cdn1.ozone.ru/multimedia/c400/1025222877.jpg')"></span>
									</div>
									<div class="card-body justify-content-between">
										<div class="card-price">10445 руб.</div>
										<h5 class="card-title">Игровая приставка Sony PlayStation Classic</h5>
										<button class="btn btn-primary">В корзину</button>
									</div>
								</div>
							</div> -->
						</div>
					</div>
				</div>
			</div>
		</div>

	</main>

	<div class="cart">
		<div class="cart-body">
			<div class="cart-title">Корзина</div>
			<div class="cart-total">Общая сумма: <span>0</span> руб</div>

			<div class="cart-wrapper">
				
			</div>
			<button class="btn btn-primary cart-confirm">Оформить заказ</button>
			<div class="cart-close">

			</div>
		</div>
	</div>

</body>

</html>